<template>
<!-- 吃货豆管理页面 -->
  <div>
    <el-card>
    <!-- 模糊查框 -->
    <div class="abvoeBox">
            <span>开通用户名称:</span>
            <el-input placeholder="请输入内容" v-model="userName" class="abvoeBox_input"></el-input>
            <el-button type="primary" @click="selectFoodieBeanEntityList()" style="margin-left:10px">查询</el-button>
    </div>
    <!-- 全查数据 -->
    <div class="belowBox">
       <el-table
            :data="tableData"
            border
            width=100%
            >
            <el-table-column
            fixed
            prop="userName"
            label="用户名称">
            </el-table-column>
            <el-table-column
            prop="foodieBeanNumber"
            label="吃货卡数量">
            <template slot-scope="scope">
                <p>{{scope.row.foodieBeanNumber+'个'}}</p>
            </template>
            </el-table-column>
            <el-table-column
            prop="createTime"
            label="创建时间">
            </el-table-column>
            <el-table-column
            prop="updateTime"
            label="修改时间"
            fixed="right">
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <div style="margin-top: 20px;">
        <template>
            <div class="block">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </template>
    </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 模糊查用户名称
      userName: '',
      // 全查吃货豆表数据集
      tableData: [],
      // 分页 （pageSize）一页展示10条数据 （pageNum）当前页
      pageRequest: {
        pageSize: 10,
        pageNum: 1
      },
      // 分页 前往第1页
      currentPage: 1,
      // 分页
      total: 0
    }
  },
  mounted () {
    // 全查吃货豆表
    this.selectFoodieBeanEntityList()
  },
  methods: {
    // 全查吃货豆类型表（模糊查用户名称）
    selectFoodieBeanEntityList () {
      this.$axios.get('/eat-service/foodieBean/selectFoodieBeanEntityList',
        {
          params: {
            userName: this.userName,
            pageSize: this.pageRequest.pageSize,
            pageNum: this.pageRequest.pageNum
          }
        }
      ).then(res => {
        this.tableData = res.data.content
        this.total = res.data.total
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页 每页条数
    handleSizeChange (val) {
      this.pageRequest.pageSize = val
      this.selectFoodieBeanEntityList()
    },
    // 分页 当前页
    handleCurrentChange (val) {
      this.pageRequest.pageNum = val
      this.selectFoodieBeanEntityList()
    },
    // 弹窗提示
    myMessage (type, message) {
      this.$message({
        type: type,
        message: message
      })
    }
  }
}
</script>

<style>
    .abvoeBox{
        width: 100%;
        height: 60px;
        text-align: left;
        margin-top: 5px;
        /* background-color: royalblue; */
        /* position: relative; */
    }
    .abvoeBox_input{
        width: 200px;
        height: 50px;
        margin-left: 10px;
        /* position: absolute; */
    }
    .belowBox{
        margin-top: 20px;
    }
</style>
